@charset "utf-8";
$font-size:40;
@function rem($px) {
    @return $px/$font-size*1rem;
}

section {
    width: 100%;
    position: absolute;
    top: rem(88);
    bottom: 0;
    background: #f3f4f6;
     overflow-y: scroll;
}

#productfinish{
    width: rem(249);
    height: rem(183);
    background: rgba(0,0,0,0.5);
    border-radius: rem(10);
    position: absolute;
    top:rem(500) ;
    left: rem(196);
    z-index: 99;
    display: none;
    
    .finishimg{
        width: rem(69);
        height: rem(69);
        margin:  rem(15) auto rem(15) auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        text-align: center;
        font-size:rem(28) ;
        color: white;
    }
}

#productfinish2{
    width: rem(249);
    height: rem(183);
    background: rgba(0,0,0,0.5);
    border-radius: rem(10);
    position: absolute;
    top:rem(500) ;
    left: rem(196);
    z-index: 99;
    display: none;
    
    .finishimg{
        width: rem(69);
        height: rem(69);
        margin:  rem(15) auto rem(15) auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        text-align: center;
        font-size:rem(28) ;
        color: white;
    }
}
.phone {
    width: 90%;
    height: rem(83);
    border: rem(1) solid #ccc;
    background: #fff;
    margin: rem(30) auto rem(30) auto;
    label {
        font-size: rem(30);
        margin-left: rem(15);
        line-height: rem(83);
    }
    input {
        width: rem(418);
        height: rem(76);
        border: 0;
        font-size: rem(30);
        color: black;
        text-indent: rem(6);
        line-height: rem(83);
    }
}

.yan {
    width: 90%;
    height: rem(83);
    margin: 0 auto rem(30) auto;
    .authcode {
        width: 60%;
        height: rem(83);
        border: rem(1) solid #ccc;
        background: #fff;
        label {
            font-size: rem(30);
            margin-left: rem(15);
            line-height: rem(83);
        }
        input {
            width: rem(216);
            height: rem(76);
            font-size: rem(30);
            color: black;
            text-indent: rem(32);
            border: 0;
            line-height: rem(83);
        }
    }
    .authcodeicon {
        width: 30%;
        height: rem(83);
        border: rem(1) solid #ccc;
        background: #fff;
        font-size: rem(27);
        line-height: rem(83);
        text-align: center;
        input[type="button"]{
            appearance: none;
            -webkit-appearance: none;
            width:100%;
           
            background: #FFFFFF;
             font-size: rem(24);
       
        text-align: center;
        color: blue;
        }
    }
}

.div1{
    width: r(10);
    height: r(10);
    
    img{
        width: 100%;
        height: 100%;
    }
}
table{
    width: 90%;
    margin: 0 auto ;
    outline: none;
     #thrid{
            border-bottom: rem(1) solid #ccc;
        }
    tr{
        td{
            width: 100%;
            height: rem(83);
            border-top: rem(1) solid #ccc;
            border-left: rem(1) solid #ccc;
            border-right: rem(1) solid #ccc;
            background: #fff;
            label {
            font-size: rem(30);
            margin-left: rem(15);
            line-height: rem(83);
        }
       
       
        
        input {
           width: rem(418);
            height: rem(76);
            font-size: rem(30);
            color: black;
            text-indent: rem(6);
            border: 0;
            line-height: rem(83);
        }
        }
    }
}
.agreement{
    width: 90%;
    margin: rem(32) auto rem(64) auto;
    font-size: rem(25);
    position: relative;
    input[type="checkbox"]{
       display: none;
    }
     input[type="checkbox"]+label{
         display: inline-block;
         width: 90%;
         a{
             color: red;
         }
     }
     label::before{
         content: "";
         display: inline-block;
         width: rem(27);
         height: rem(26);
         border: rem(1) solid red;
          position: absolute;
         top: 0;
         left: 0;
     }
     input[type="checkbox"]:checked + label:after{
         content: "\2714";
         color: red;
         display: block;
         width: rem(27);
         height: rem(26);
         position: absolute;
         font-size: rem(40);
         top: rem(-20);
         left: 0;
        
     }
}

.finish{
 
    width:rem(580);
    height:rem(85);
    border-radius: rem(10);
    background: #d62d31;
    color: white;
    font-size:rem(32);
    text-align: center;
    letter-spacing: rem(13);
    margin-left: rem(30);
}
